<template>
  <div style="background-color: white">
    <div>
      <h3 style="margin-left: 10px; margin-bottom: 15px">新增物料</h3>
    </div>
    <div>
      <el-divider></el-divider>
    </div>
    <div>
      <div class="tableTitle"><span class="midText">基础信息</span></div>
    </div>
    <div style="margin-top: 25px; margin-bottom: 25px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="formRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="物料编号" prop="materialnumber">
                <el-input
                  v-model="ruleForm.materialnumber"
                  style="width: 400px"
                  :disabled="value2"
                ></el-input>
                <el-switch
                  v-model="value2"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #ff4949;
                    margin-left: 10px;
                  "
                />
                <span>系统编号</span>
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="物料名称" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="规格型号" prop="specificationsversion">
                <el-input
                  v-model="ruleForm.specificationsversion"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="单位" prop="unit">
                <el-select
                  v-model="ruleForm.unit"
                  placeholder="请选择单位"
                  style="width: 400px"
                >
                  <el-option
                    v-for="(a, index) in Bangdata.value"
                    :key="index"
                    :label="a.text"
                    :value="a.text"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="物料类型" prop="materialtype">
                <el-select
                  v-model="ruleForm.materialtype"
                  placeholder="请选择物料类型"
                  style="width: 400px"
                >
                  <el-option
                    v-for="(a, index) in Materialtypedata.value"
                    :key="index"
                    :label="a.text"
                    :value="a.text"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="物料属性" prop="materialProperty">
                <el-select
                  v-model="ruleForm.materialProperty"
                  placeholder="请选择物料属性"
                  style="width: 400px"
                >
                  <el-option
                    v-for="(a, index) in MaterialPropertydata.value"
                    :key="index"
                    :label="a.text"
                    :value="a.text"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="物料分类" prop="materialclassify">
                <el-cascader
                  :options="options"
                  :show-all-levels="false"
                  v-model="ruleForm.materialclassify"
                  :props="{
                    label: 'label',
                    value: 'value',
                    children: 'children',
                  }"
                />
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="状态" prop="state">
                <el-radio-group
                  v-model="ruleForm.state"
                  v-for="(a, index) in Statedata.value"
                  :key="index"
                >
                  <el-radio :label="a.value">{{ a.text }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="有效期限" prop="periodofvalidity">
                <el-input
                  v-model="ruleForm.periodofvalidity"
                  style="width: 150px"
                ></el-input>
                <el-select
                  v-model="ruleForm.periodofvalidityunit"
                  placeholder="请选择有效期单位"
                  style="width: 150px"
                >
                  <el-option
                    v-for="(a, index) in Periodofvalidityunitdata.value"
                    :key="index"
                    :label="a.text"
                    :value="a.text"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="报警天数" prop="alarmdays">
                提前<el-input
                  v-model="ruleForm.alarmdays"
                  style="width: 250px"
                ></el-input
                >天报警
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="库存上限" prop="inventoryceiling">
                <el-input
                  v-model="ruleForm.inventoryceiling"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="库存下限" prop="stockfloor">
                <el-input
                  v-model="ruleForm.stockfloor"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple">
              <el-form-item label="采购价格" prop="purchaseprice">
                <el-input
                  v-model="ruleForm.purchaseprice"
                  style="width: 400px"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="ruleForm.remark"
                  type="textarea"
                  rows="4"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <div class="tableTitle"><span class="midText">图片</span></div>
    </div>
    <div style="margin-top: 25px; margin-bottom: 25px">
      <div style="margin-left: 35px">
        <el-button
          size="small"
          type="primary"
          @click="UplodsAsyncss"
          style="margin-bottom: 15px"
          >点击上传</el-button
        >
        <el-upload
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-change="addfile"
          :auto-upload="false"
          multiple
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>
    <div>
      <div class="tableTitle"><span class="midText">附件</span></div>
      <el-button
        size="small"
        type="primary"
        @click="UplodsAsyncss2"
        style="margin-bottom: 15px"
        >附件上传</el-button
      >
    </div>
    <div>
      <div style="text-align: center; margin-top: 25px; margin-bottom: 25px">
        <el-upload
          class="upload-demo"
          drag
          :on-change="addfile2"
          :auto-upload="false"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
    </div>
    <el-button type="primary" @click="submitForm('ruleForm')"
      >立即创建</el-button
    >
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </div>
</template>
  <script>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { Materialtype, UplodsAsync, AddMaterial } from "../../api/Material";
import { GetDictionary } from "../../api/Dictionaries";
import { useRouter } from "vue-router";
export default {
  setup() {
    const value2 = ref(true);

    const optionsSelect = ref([]);
    //---------- 字典下拉---------------
    const Bangdata = reactive([]);
    const Materialtypedata = reactive([]);
    const MaterialPropertydata = reactive([]);
    const Periodofvalidityunitdata = reactive([]);
    const Statedata = reactive([]);
    const options = ref([]);

    //---------------结束------------------------
    //页面初始化 字典下拉等...
    const MaterialList = () => {
      Materialtype().then((res) => {
        options.value = res.result;
      });
      GetDictionary("单位").then((res) => {
        Bangdata.value = res.result;
        console.log(Bangdata);
      });
      GetDictionary("物料类型").then((res) => {
        Materialtypedata.value = res.result;
        console.log(Materialtypedata);
      });
      GetDictionary("物料属性").then((res) => {
        MaterialPropertydata.value = res.result;
        console.log(MaterialPropertydata);
      });
      GetDictionary("有效期单位").then((res) => {
        Periodofvalidityunitdata.value = res.result;
        console.log(Periodofvalidityunitdata);
      });
      GetDictionary("物料状态").then((res) => {
        Statedata.value = res.result;
        console.log(Statedata);
      });
    };
    MaterialList();

    //表单验证
    const rules = {
      name: [{ required: true, message: "请输入物料名称", trigger: "blur" }],
      specificationsversion: [
        { required: true, message: "请输入规格型号", trigger: "blur" },
      ],
      unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
      materialtype: [
        { required: true, message: "请输入物料类型", trigger: "blur" },
      ],
      materialProperty: [
        { required: true, message: "请输入物料属性", trigger: "blur" },
      ],
      periodofvalidity: [
        { required: true, message: "请输入有效期", trigger: "blur" },
      ],
      periodofvalidityunit: [
        { required: true, message: "请选择有效期单位", trigger: "change" },
      ],
      alarmdays: [
        { required: true, message: "请输入报警天数", trigger: "blur" },
      ],
      inventoryceiling: [
        { required: true, message: "请输入库存上限", trigger: "blur" },
      ],
      stockfloor: [
        { required: true, message: "请输入库存下限", trigger: "blur" },
      ],
      purchaseprice: [
        { required: true, message: "请输入采购价格", trigger: "blur" },
      ],
      remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
    };
    const formRef = ref(null);
    //表单
    const ruleForm = reactive({
      name: "",
      specificationsversion: "",
      unit: "",
      materialtype: "",
      materialProperty: "",
      materialclassify: 1,
      state: "true",
      periodofvalidity: null,
      periodofvalidityunit: "",
      alarmdays: null,
      inventoryceiling: null,
      stockfloor: null,
      purchaseprice: null,
      remark: "",
      imgChildren: [],
      accessoryChildren: [],
    });
    const imgdata = reactive([]);
    const router = useRouter();

    const UplodsAsyncss = () => {
      let formData = new FormData();
      // 将上传的文件放到数据对象中
      imgdata.forEach((x) => {
        console.log(x.files);
        formData.append("files", x.files);
      });
      console.log("提交前", formData.getAll("files"));
      UplodsAsync(formData).then((res) => {
        if (res.success == true) {
          ElMessage.success("图片上传成功");
        } else {
          ElMessage.error("图片上传失败");
          return;
        }
      });
    };
    const imgdata2 = reactive([]);
    const UplodsAsyncss2 = () => {
      let formData = new FormData();
      // 将上传的文件放到数据对象中
      imgdata2.forEach((x) => {
        console.log(x.files);
        formData.append("files", x.files);
      });
      console.log("提交前", formData.getAll("files"));
      UplodsAsync(formData).then((res) => {
        if (res.success == true) {
          ElMessage.success("附件上传成功");
        } else {
          ElMessage.error("附件上传失败");
          return;
        }
      });
    };
    // 物料添加事件
    const submitForm = () => {
      // 表单校验
      formRef.value.validate((valid) => {
        if (valid) {
          ruleForm.materialclassify = parseInt(
            ruleForm.materialclassify[length + 1]
          );
          console.log(ruleForm);
          AddMaterial(ruleForm).then((res) => {
            if (res.success == true) {
              ElMessage.success("提交成功！");
              router.push({
                path: "/ShowMaterial",
              });
            } else {
              ElMessage.error("提交失败");
            }
          });
        } else {
          return false;
        }
      });
    };
    // 重置
    const onReset = () => {
      formRef.value.resetFields();
    };
    const addfile = (file) => {
      imgdata.push({
        files: file.raw,
      });
      ruleForm.imgChildren.push({
        Filename: "物料图片",
        Filepath: file.name,
      });
      console.log(ruleForm);
    };
    const addfile2 = (file) => {
      console.log(file.raw);
      imgdata2.push({
        files: file.raw,
      });
      ruleForm.accessoryChildren.push({
        Filename: "物料附件",
        Filepath: file.name,
      });
      console.log(ruleForm);
    };
    return {
      value2,
      optionsSelect,
      rules,
      formRef,
      ruleForm,
      options,
      Materialtypedata,
      MaterialPropertydata,
      Periodofvalidityunitdata,
      Statedata,
      Bangdata,
      imgdata2,
      imgdata,
      router,
      addfile2,
      submitForm,
      onReset,
      addfile,
      UplodsAsyncss,
      UplodsAsyncss2,
    };
  },
};
</script>
  <style>
.tableTitle {
  position: relative;
  margin: 0 auto;
  height: 1px;
  background-color: #d4d4d4;
  text-align: center;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);
}
.midText {
  position: absolute;
  left: 50%;
  background-color: #ffffff;
  padding: 0 15px;
  transform: translateX(-50%) translateY(-50%);
}
</style> 

